<template>
  <div class="app-container">
    <!-- 学科管理-标签 -->
    <div class="top">
      <el-form ref="form" :model="form" label-width="80px" :inline="true">
        <el-form-item label="标签名称">
          <el-input v-model="form.tagName"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.state" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="clear">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-button type="success"  icon="el-icon-edit" @click="dialogOpen">新增标签</el-button>
    </div>
    <!-- 提示 -->
    <el-alert
      :title="`共${total}条数据`"
      type="info"
      :closable= "false"
      show-icon>
    </el-alert>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="180"></el-table-column>
      <el-table-column prop="subjectName" label="所属学科" width="180"></el-table-column>
      <el-table-column prop="tagName" label="标签名称" width="180"></el-table-column>
      <el-table-column prop="username" label="创建者" width="180"></el-table-column>
      <el-table-column prop="addDate" label="创建日期" width="180">
        <template #default="{row}">
          {{getTime(row.addDate)}}
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态" width="180">
        <template #default="{row}">
          {{row.state ? '已启用' : '已禁用'}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="text" @click="stateChange(row)">
            {{row.state? '启用' : '禁用'}}
          </el-button>
          <!-- 启用 不可以修改删除 -->
          <el-button type="text" @click="edit(row.id)" :disabled="row.state===1">修改</el-button>
          <el-button type="text" @click="del(row.id)" :disabled="row.state===1">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="bottom">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="form.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="total">
      </el-pagination>
    </div>
    <add-tags ref="addTags" :dialog-visible="visible" @close-dialog="dialogClose" @update-list="getTableList"></add-tags>
  </div>
</template>

<script>
import {tagsList, tagsDel, tagsState} from '@/api/tags'
import {parseTime} from '@/utils/index.js'
import AddTags from '@/views/subjects/tags/components/add-tags.vue'
export default {
  name: 'Tags',
  components: {
    AddTags
  },
  data(){ 
    return {
      form: {
        page: 1,
        pagesize: 10,
      },
      options: [
        {label: '启用', value: 1},
        {label: '禁用', value: 0}
      ],
      total: 0,
      tableData: [],
      visible: false
    }
  },
  mounted(){
    this.getTableList()
  },
  methods: {
    // 清除
    clear() {
      this.form= {
        page: 1,
        pagesize: 10,
      }
      this.getTableList()
    },
    // 搜索
    search() {
      this.getTableList(this.form)
    },
    async getTableList() {
      const res = await tagsList(this.form)
      // console.log(res);
      this.tableData = res.items
      this.total = res.counts
    },
    getTime(time) {
      return parseTime(time)
    },
    // 条数改变
    handleSizeChange(size) {
      this.form.pagesize = size
      this.getTableList()
    },
    // 当前页改变
    handleCurrentChange(page){
      this.form.page = page
      this.getTableList()
    },
    // 弹框关闭
    dialogClose() {
      this.visible = false
    },
    // 弹窗打开
    dialogOpen() {
      this.visible = true
    },
    edit(id) {
      this.visible = true
      // 调子组件的方法 让数据回填
      this.$refs.addTags.getDeatil(id)
    },
    del(id) {
      // 询问 用户
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( async() => {
          // 掉新增接口
          await tagsDel(id)
          // 提示用户
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          // 刷新列表
          this.getTableList()
        })
    },
    // 状态改变
    async stateChange(row) {
      // console.log(row.id, row.state);
      // 调接口
      await tagsState(row.id, row.state? 0 : 1)
      // 刷新列表
      this.getTableList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-container {
    background-color: #fff;
    margin: 10px;
    .top {
      display: flex;
      justify-content: space-between;
    }
    .bottom {
      display: flex;
      justify-content: right;
    }
  }
</style>